import 'babel-polyfill';
import '../components/style.js';
import './index.less';
import 'nprogress/nprogress.css';
import 'highlight.js/styles/solarized-light.css';
import Vue from 'vue';
import Vuex from 'vuex';
import VueRouter from 'vue-router';
import VueClipboard from 'vue-clipboard2';
import NProgress from 'nprogress';
import routes from './routes';
import Md from './components/md';
import Api from './components/api';
import Antd from 'ant-design-vue';
import demoBox from './components/demoBox';
import demoContainer from './components/demoContainer';

Vue.use(Antd);

const mountedCallback = {
  install: Vue => {
    Vue.directive('mountedCallback', {
      inserted(el, binding, vNode) {
        binding.value(vNode);
      },
    });
  },
};

Vue.use(Vuex);
Vue.use(mountedCallback);
Vue.use(VueClipboard);
Vue.use(VueRouter);
Vue.component(Md.name, Md);
Vue.component(Api.name, Api);
Vue.component(demoBox.name, demoBox);
Vue.component(demoContainer.name, demoContainer);

const router = new VueRouter({
  mode: 'history',
  fallback: false,
  routes,
});
router.beforeEach((to, from, next) => {
  if (to.path !== from.path) {
    // 页面渲染完毕后才调done方法
    NProgress.start();
  }
  next();
});

const store = new Vuex.Store({
  state: {
    username: 'zeka',
  },
  mutations: {
    update(state, payload) {
      state.username = payload.username;
    },
  },
});
Vue.config.devtools = true;

new Vue({
  el: '#app',
  router,
  store,
});
